<template>
	<div class="cheapCount">
		<div class="discount">
			<div class="discount-title clearfix">
				<router-link to="/" tag="span" class="mui-icon mui-icon-arrowleft"></router-link>
				<h2 class="">白菜价-淘宝内部券</h2>
			</div>
		</div>
		<!-- 横向滚动 -->
		<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<div class="mui-scroll">
				<a @click="togglePage(item.titleId)" :class="['mui-control-item',item.titleId === 0 ? 'mui-active' : '']" v-for="item in titleList"
				 :key="item.titleId">
					{{item.title}}
				</a>
			</div>
		</div>
		<!-- 列表区域 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="(item ,index) in discountList" :key="index">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" :src="imgUrl(index)">
					<div class="mui-media-body clearfix">
						<h2 v-html="item.productName">{{item.productName}}</h2>
						<p class="p1">
							<span class="span1">券后</span>
							<span class="span2"><small>￥</small>{{setPrice(index)}}</span>
							<del>￥206</del>
						</p>
						<div class="progress clearfix">
							<div id="demo1" class="progressbar fl">
								<span :style="'width:' + setWidth(index) + ';'">
						
								</span>
								<i class="shuzhi">{{setWidth(index)}}</i>
							</div>
							<span class="yiling">{{setYl(index)}}</span>
						</div>
						<div class="share">
							<div class="lingqu fl">
								<div class="clickLq" v-html="item.productCoupon"></div>
							</div>
							<button class="mui-btn fr">下单链接</button>
						</div>
					</div>
				</a>
			</li>
		</ul>
		<mm-footer></mm-footer>
	</div>
</template>
<script>
	import mmFooter from "./publicComponents/mmFooter.vue"
	import mui from '../lib/mui/js/mui.min.js'
	export default {
		data() {
			return {
				titleList: [],
				discountList: [],
				num: 0,
				dataChace: {}
			}
		},
		created() {
			this.getDiscountTitle()
			this.getDiscountList(this.num)
		},
		mounted() {
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			// mui("#demo1").progressbar({progress:20}).show();
		},
		computed: {

		},
		methods: {
			getDiscountTitle() {
				this.$http.get('api/getbaicaijiatitle').then((res) => {
					this.titleList = res.body.result
					// console.log(res.body.result)
				})
			},
			getDiscountList(num) {
				this.$http.get('api/getbaicaijiaproduct?titleid=' + num).then((res) => {
					this.discountList = res.body.result
					this.discountList = this.discountList.reverse()
					// console.log(this.discountList)
					var titleid = this.discountList[0].titleId
					this.dataChace[titleid] = this.discountList
					// console.log(this.discountList)
				})
			},
			imgUrl(i) {
				var href = ''
				// if(i == 0 || i == 1) {
				//     return 'https://gd2.alicdn.com/imgextra/i2/2551982558/TB2H6XhamiJ.eBjSspiXXbqAFXa_!!2551982558.jpg_400x400.jpg'
				// }
				this.discountList.forEach((item, index) => {
					if (i === index) {
						href = item.productImg.slice(item.productImg.indexOf('"') + 1, item.productImg.lastIndexOf('"'))
						// console.log(href)
						return
					}
				})
				return href
			},
			togglePage(titleId) {
				if (this.dataChace[titleId]) {
					this.discountList = this.dataChace[titleId]
					return
				}
				this.getDiscountList(titleId)
			},
			setPrice(i) {
				var str = ''
				this.discountList.forEach((item, index) => {
					if (i === index)
						str = item.productPrice.slice(item.productPrice.indexOf('¥</em>') + 6, item.productPrice.lastIndexOf('<del>'))
					// console.log(str)
				})
				return str
			},
			setYl(i) {
				var str = ''
				this.discountList.forEach((item, index) => {
					if (i === index)
						str = item.productCouponRemain.slice(item.productCouponRemain.indexOf('已'), item.productCouponRemain.lastIndexOf(
							'张') + 1)
					// console.log(str)
				})
				return str
			},
			setWidth: function(i) {
				var str = ''
				this.discountList.forEach((item, index) => {
					if (i === index)
						str = item.productCouponRemain.slice(item.productCouponRemain.indexOf('width:') + 6, item.productCouponRemain.lastIndexOf(
							';'))
				})
				console.log(str)
				// return 'width:' + str + ';'
				return str
			}
		},
		components: {
			mmFooter
		}
	}
</script>
<style lang="less" scoped>
	@import "../../src/less/var";

	.cheapCount {
		touch-action: pan-y;

		.discount-title {
			height: 98 / @base;
			padding: 10 / @base 15 / @base;
			background-color: #ff9e20;
			position: relative;

			h2 {
				font-size: 28 / @base;
				height: 100%;
				line-height: 70 / @base;
				margin: 0;
				text-align: center;
				margin: 0 auto;
			}

			span {
				font-size: 40 / @base;
				height: 100%;
				line-height: 70 / @base;
				position: absolute;
				left: 20/@base;
			}
		}

		.mui-control-item {
			font-size: 26/@base;
		}

		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			border-bottom: none;
		}

		.mui-table-view-cell>a:not(.mui-btn) {
			word-wrap: unset;
			white-space: normal;
		}

		.mui-table-view .mui-media-object {
			display: block;
			width: 250/@base;
			height: 250/@base;
			max-width: unset;
		}

		.mui-media-body {

			// position: relative;
			h2 {
				font-size: 26/@base;
				word-wrap: unset;
				line-height: 1.4;
				height: 80/@base;
				white-space: initial;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.progress {
				margin-top: 10/@base;

				.progressbar {
					width: 160/@base;
					background-color: aquamarine;
					border-radius: 10px;
					overflow: hidden;
					font-size: 20/@base;
					line-height: 30/@base;
					text-align: center;
					position: relative;

					.shuzhi {
						font-size: 20/@base;
						line-height: 30/@base;
						position: absolute;
						z-index: 9;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
						font-style: normal;
					}

					span {
						display: block;
						width: 10%;
						height: 30/@base;
						background-color: #ff9e20;
					}
				}

				.yiling {
					font-size: 22/@base;
					display: block;
					float: left;
					height: 30/@base;
					line-height: 30/@base;
					color: red;
					margin-left: 10/@base;
				}
			}

			.p1 {
				.span1 {
					color: red;
				}

				.span2 {
					font-size: 40/@base;
					color: red;
				}
			}

			.share {
				// margin-top: 16/@base;
				position: absolute;
				bottom: 20/@base;

				// width: 100%;
				.clickLq {
					font-size: 24/@base;
					color: red;
					text-align: center;
					height: 50/@base;
					width: 210/@base;
					line-height: 50/@base;
					border: 1px dashed red;
				}

				button {
					padding: 6/@base 12/@base;
					font-size: 24/@base;
					background-color: #ff5e5d;
					color: #fff;
					float: right;
					margin-left: 60/@base;
				}
			}
		}
	}
</style>
